import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { VolumeO, Arrow } from "@react-vant/icons";
import { NoticeBar, Swiper } from "react-vant";
import axios from "../../http/axios";
import { Tabs } from "antd-mobile";
import { getcaidan } from "../../api/http";
import style from "./index.module.scss";
import HHomeComp from "../../components/HomeComp/index";
import HoemTop from "../../components/HoemTop/index";
const Index: React.FC = () => {
  const [title, setTitle] = React.useState([]);
  const [list, setList] = useState([]);
  //获取标题
  const datatitle = async () => {
    const res = await axios.get("/api/city");
    console.log(res);
  };
  //获取列表
  const dataList = async () => {
    const res = await getcaidan();
    console.log(res);
  };

  useEffect(() => {
    datatitle();
    dataList();
  }, []);
  //跳转大厅
  const navigate = useNavigate();
  const tzdt = () => {
    navigate("/kepuhaodating");
  };

  //聊天
  
  return (
    <div className={style.box}>
      <div className={style.top}>
        <NoticeBar leftIcon={<VolumeO />} rightIcon={<Arrow />}>
          <Swiper
            autoplay={3000}
            indicator={false}
            vertical
            className="notice-swipe"
          >
            <Swiper.Item>北京家园医院将于12月11日进行义诊</Swiper.Item>
            <Swiper.Item>北京家园医院将于12月12日进行义诊</Swiper.Item>
            <Swiper.Item>北京家园医院将于12月13日进行义诊</Swiper.Item>
          </Swiper>
        </NoticeBar>
      </div>
      <div className={style.tabt}>
        <Tabs>
          <Tabs.Tab title="精选" key="fruits">
            <div className={style.youkepu}>
              <div onClick={() => tzdt()}>科普号大厅&gt;</div>
            </div>
            <div>
              <HHomeComp></HHomeComp>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="关注" key="vegetables">
            <div className={style.youkepu}>
              <div onClick={() => tzdt()}>科普号大厅&gt;</div>
            </div>
            <div>
              <HoemTop></HoemTop>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="订阅" key="animals">
            <div className={style.youkepu}>
              <div onClick={() => tzdt()}>科普号大厅&gt;</div>
            </div>
            <div>
              <h1>WebSocket一对一聊天</h1>
              
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
};

export default Index;
